import 'package:flutter/material.dart';
import 'package:zhongyiapp/pages/book.dart';
import 'package:zhongyiapp/pages/index.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Bookscreen(),
    );
  }
}

class Bookscreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(children: const [title(), store()]),
      ),
    );
  }
}

class title extends StatelessWidget {
  const title({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(top: 10.0),
        width: 420,
        height: 120,
        decoration: BoxDecoration(
            image: DecorationImage(
          image: AssetImage('assets/背景图4.jpg'),
          fit: BoxFit.cover,
          colorFilter: ColorFilter.mode(
            Colors.white.withOpacity(0.8), BlendMode.dstATop, // 混合模式
          ),
        )),
        child: Column(children: <Widget>[
          ListTile(
            leading: GestureDetector(
              onTap: () {
                // 跳转到目标页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Indexscreen()),
                );
              },
              child: Icon(
                Icons.arrow_back_ios,
                size: 25.0,
                color: Colors.white,
              ),
            ),
            trailing: SizedBox(
              width: 210.0, // 这里的数字可以根据需要调整
              child: Text(
                '书城',
                style: TextStyle(fontSize: 25.0, color: Colors.white),
              ),
            ),
          ),
          Container(
            width: 350,
            height: 45,
            decoration: BoxDecoration(
                color: const Color.fromARGB(255, 240, 240, 240),
                borderRadius: BorderRadius.all(Radius.circular(16.0))),
            child: Row(
              children: [
                SizedBox(width: 8.0),
                Icon(Icons.search),
                SizedBox(width: 8.0),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: '请输入作者名、书籍名',
                      border: InputBorder.none,
                    ),
                    onSubmitted: (value) {
                      // 处理搜索逻辑
                      print('Search for: $value');
                    },
                  ),
                ),
              ],
            ),
          )
        ]));
  }
}

class store extends StatelessWidget {
  const store({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height - 120,
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  ListTile(
                      title: Text('推荐',
                          style: TextStyle(
                              color: Color.fromARGB(255, 130, 96, 58)))),
                  ListTile(title: Text('白话')),
                  ListTile(title: Text('经论')),
                  ListTile(title: Text('教材')),
                  ListTile(title: Text('注解')),
                  ListTile(title: Text('综合')),
                  ListTile(title: Text('本草')),
                  ListTile(title: Text('针灸')),
                  ListTile(title: Text('脉学')),
                  ListTile(title: Text('医案')),
                  ListTile(title: Text('医论')),
                  ListTile(title: Text('方药')),
                  ListTile(title: Text('内科')),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      '榜单排行',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      GestureDetector(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => bookscreen(),
                            ),
                          );
                        },
                        child: Image.asset(
                          'assets/难经正义.jpg',
                          width: 100,
                          height: 120,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => bookscreen(),
                            ),
                          );
                        },
                        child: Image.asset(
                          'assets/中医基础理论.jpg',
                          width: 100,
                          height: 120,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => bookscreen(),
                            ),
                          );
                        },
                        child: Image.asset(
                          'assets/内经知要.jpg',
                          width: 100,
                          height: 120,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Image.asset(
                        'assets/神农本草经.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/走近中医.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/黄帝内经.jpg',
                        width: 100,
                        height: 120,
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      '四大经典',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Image.asset(
                        'assets/金匮要略.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/伤寒论.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/纯条纹版.jpg',
                        width: 100,
                        height: 120,
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Image.asset(
                        'assets/条纹含方剂版.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/黄帝内经素问.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/黄帝内经灵枢.jpg',
                        width: 100,
                        height: 120,
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      '四小经典',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Image.asset(
                        'assets/滨湖脉学.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/汤头歌诀.jpg',
                        width: 100,
                        height: 120,
                      ),
                      Image.asset(
                        'assets/医学三字经.jpg',
                        width: 100,
                        height: 120,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
